<template>
    <view class="layout">
        <view class="navbar">
            <view class="statusBar" :style="{height:47+'px'}"></view>
            <view class="titleBar" :style="{height:40+'px',marginLeft:leftIconMargin+'px'}">
                <view class="icon" v-on:click="$emit('userInfoClick')">
                    <image class="header" :src="header" mode="aspectFill"></image>
                </view>
                <view class="score" v-on:click="$emit('addScoreClick')" v-if="usertype!= 1">
                    <image class="coin" src="../../static/shouye/ic_coin.png" mode="aspectFill"></image>
                    <view class="text">
                        {{score}}
                    </view>
                    <image class="add" src="../../static/shouye/ic_add.png" mode="aspectFill"></image>
                </view>
                <view class="rank" v-if="usertype!= 1" v-on:click="$emit('rankClick')">
                    <image src="../../static/ic_rank.png" mode="aspectFit"></image>
                </view>
            </view>
        </view>
        <view class="fill" :style="{height:87+'px'}"></view>
    </view>
</template>

<script>
    import Vue from 'vue';
    import {
        getStatusBarHeight,
        getTitleBarHeight,
        getNavBarHeight,
        getLeftIconLeft
    } from "@/utils/system.js";

    export default {
        props: {
            level: {
                type: Number,
                default: 1
            },
            usertype: {
                type: Number,
                default: 1
            },
			statusHeight: {
			    type: Number,
			    default: 0
			},
			titleBarHeight: {
			    type: Number,
			    default: 0
			},
			naviBarHeight: {
			    type: Number,
			    default: 0
			},
			leftIconMargin: {
			    type: Number,
			    default: 0
			},
            score: {
                type: Number,
                default: 0
            },
            header: {
                type: String,
                default: "../../static/logo.png"
            }
        },
        data() {
            return {};
        },
		onShow() {
			this.statusHeight = getStatusBarHeight();
			this.titleBarHeight = getTitleBarHeight();
			this.leftIconMargin = getLeftIconLeft();
			this.naviBarHeight = getNavBarHeight();
			console.log("onShow:"+this.statusHeight+","+this.titleBarHeight+","+this.leftIconMargin+","+this.naviBarHeight);
		},
		mounted() {
			this.statusHeight = getStatusBarHeight();
			this.titleBarHeight = getTitleBarHeight();
			this.leftIconMargin = getLeftIconLeft();
			this.naviBarHeight = getNavBarHeight();
			console.log("mounted:"+this.statusHeight+","+this.titleBarHeight+","+this.leftIconMargin+","+this.naviBarHeight);
		},
        methods: {
			
		}
    };
</script>

<style lang="scss" scoped>
   .layout {
       .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 10;
            background:
                linear-gradient(to bottom, transparent, #fff 600rpx),
                linear-gradient(to right, #fe0c28 10%, #F4E258);

           .statusBar {}

           .icon {
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
                background-color: #ededed;
                margin-left: 30rpx;

               .header {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    overflow: hidden;
                }

               .level {
                    z-index: 10;
                    width: 30rpx;
                    height: 30rpx;
                    margin-left: -20rpx;
                }
            }

           .titleBar {
                display: flex;
                align-items: center;
                height: 30rpx;

               .score {
                    align-items: center;
                    display: flex;
                    flex-direction: row;
                    background-color: rgba(0, 0, 0, 0.5);
                    font-size: 22px;
                    font-weight: 700;
                    color: black;
                    margin-left: 30rpx;
                    padding: 5rpx 10rpx;
                    border-radius: 45rpx;

                   .coin {
                        height: 50rpx;
                        width: 50rpx;
                    }

                   .add {
                        height: 30rpx;
                        width: 30rpx;
                    }

                   .text {
                        color: white;
                        margin-left: 20rpx;
                        margin-right: 20rpx;
                    }
                }
            }

           .rank {
                height: 80rpx;
                width: 80rpx;

                image {
                    width: 100%;
                    height: 100%;
                    margin-left: 50rpx;
                }
            }
        }

       .fill {}
    }
</style>